<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        dom: document object model 文档对象模型
     -->
    <header>
        <div class="div1">
            <button>点击</button>
        </div>
        <div id="box" class="div2">
            <a href="">内容1</a><a href="">内容2</a><a href="">内容3</a>
        </div>
        <div class="div3">
            <div>
                <ul>
                    <li>列表1</li>
                    <li>列表2</li>
                    <li>列表3</li>
                </ul>
            </div>
        </div>
    </header>
    <script>
        // console.log(document); //文档对象模型
        // js操作标签 (通过document操作标签)

        // 对标签本身 增删改查
        // 对标签属性 增删改查

        // 通过标签名称获取标签
        var div = document.getElementsByTagName("div");
        console.log(div);  //[div,...]

        div = document.getElementById("box");
        console.log(div); // div

        div = document.getElementsByClassName("div1");
        console.log(div);  //[div,...]

        // div = document.getElementsByName()

        // 参数是选择器
        div = document.querySelector("#box");
        console.log(div); // div

        div = document.querySelector("div");
        console.log(div); // 第一次 div

        div = document.querySelector(".div1");
        console.log(div); // 第一次 div

        div = document.querySelectorAll(".div1");
        console.log(div);//[div,...]


    </script>
</body>
</html>